<!-- 水 ｜ 电 表抄表 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">抄表</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container">
				<el-scrollbar class="zs-drawer-content">
					<!-- card1 -->
					<div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-01">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">合同信息</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materCopyContract" ref="contractForm" :isDisabled="isReadOnly"></HsForm>
					</div>
					<!-- card2 -->
					<div class="zs-align-center zs-space-bottom zs-space-top-lg" id="sm-drawer-demo-card-02">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">{{ meterInfoName }}</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materCopyWater" ref="baseForm" :isDisabled="isReadOnly"></HsForm>
					</div>
					<!-- card3 -->
					<div class="zs-align-center zs-space-bottom zs-space-top-lg" id="sm-drawer-demo-card-03">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">抄表读数</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materCopyReading" ref="readingForm" @selectChange="selectChange" :isDisabled="isReadOnly"></HsForm>
					</div>
				</el-scrollbar>
				<hsDocWrapper :nodeList="curNodeList" />
			</el-container>
		</template>

		<template v-if="handleType != 'info'" #footer>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import HsForm from '@/components/hsForm.vue';
	import { materCopyContract, materCopyWater, materCopyReading } from '@/config/form/energy.js';
	import { waterCopyUpdateApi, waterCopyInfoApi, electricityCopyUpdateApi, electricityCopyInfoApi } from '@/api/energy.js';
	import { ElMessage } from 'element-plus';
	import { ref, nextTick, watch } from 'vue';
	import { useStore } from 'vuex';
	import { deepClone, accSubtr, accMul } from '@/utils/publicUtils';
	import { towNumber } from '@/utils/number-util';
	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		energyType: { type: String, default: '' },
		currentRow: { type: Object },
	});
	const emit = defineEmits(['close']);
	const store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSize);
	const meterInfoName = props.energyType == 'electricity' ? '电表信息' : '水表信息';
	const curNodeList = ref([
		{ name: '合同信息', id: 'sm-drawer-demo-card-01' },
		{ name: meterInfoName, id: 'sm-drawer-demo-card-02' },
		{ name: '抄表读数', id: 'sm-drawer-demo-card-03' },
	]);

	let isShowDrawer = ref(props.isShow);
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				newVal && getInfo();
			});
		},
	);

	const contractForm = ref();
	const baseForm = ref();
	const readingForm = ref();

	//初始化信息
	const getInfo = async () => {
		props.energyType == 'electricity' && initElectricForm();
		let res = props.energyType == 'electricity' ? await electricityCopyInfoApi({electricMeterRecordId:props.currentRow.id}) : await waterCopyInfoApi(props.currentRow.id);
		if (res.data.code != 200) return;
		res.data.data.attachmentUrlList = res.data.data.attachmentUrlList ? res.data.data.attachmentUrlList : [];
		res.data.data.attachmentUrlList.forEach(item => {
			item.url = item.absolutePath;
			item.name = item.attachmentName;
		});
		contractForm.value.setFiledVal(res.data.data);
		baseForm.value.setFiledVal(res.data.data);
		readingForm.value.setFiledVal(res.data.data);
		nextTick(() => {
			readingForm.value.clearValidate(undefined, true);
		});
	};

	//提交
	const doConfirm = async () => {
		let model = await readingForm.value.validateForm();
		if (!model) return;
		if (model.currentUncle < props.currentRow.beforeUncle) {
			ElMessage({
				message: '本次读数小于上次读数',
				type: 'warning',
			});
			return;
		}
		model.materielId = props.currentRow.id;
		model.attachmentUrlList.forEach(item => {
			item.attachmentName = item.attachmentName || item.originalName;
			item.attachmentUrl = item.attachmentUrl || item.url;
			item.accessoryType = 4;
			item.attachmentType = 2;
		});
		let res = props.energyType == 'electricity' ? await electricityCopyUpdateApi(model) : await waterCopyUpdateApi(model);
		if (res.data.code == 200) {
			ElMessage({
				message: '提交成功',
				type: 'success',
			});
			isShowDrawer.value = false;
			emit('close', { isShow: false, isRefresh: true });
		}
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};

	//表单关联
	const selectChange = data => {
		// 计算用量
		if (data.filedName == 'currentUncle') {
			if (!data.filedVal || isNaN(data.filedVal) || data.filedVal < data.model.beforeUncle) {
				readingForm.value.setFiledSource('dosage', '');
				return;
			}
			let diffNum = accSubtr(data.filedVal, data.model.beforeUncle);
			let useNum = towNumber(accMul(diffNum, data.model.multiplier));
			readingForm.value.setFiledSource('dosage', useNum);
		}
	};

	const initElectricForm = () => {
		materCopyWater.forEach(item => {
			if (item.bindFieldName == 'deviceNum') {
				item.label = '电表编号';
			} else if (item.bindFieldName == 'deviceLocation') {
				item.label = '电表位置';
			}
		});
	};
</script>
